import React, { useState } from "react"
import { Card, Table, Tabs } from "antd"
import type { ColumnsType } from "antd/es/table"

type Resource = {
    type: string
    url: string
    duration: number
    size: number
}

type LongTask = {
    startTime: number
    duration: number
}

type PagePerformance = {
    url: string
    pv: number
    fcp: number
    lcp: number
    fid: number
    ttfb: number
    score: number
    resources: Resource[]
    longTasks: LongTask[]
}

const data: PagePerformance[] = [
    {
        url: "https://example.com/page1",
        pv: 1200,
        fcp: 1500,
        lcp: 2500,
        fid: 50,
        ttfb: 800,
        score: 85,
        resources: [
            { type: "js", url: "https://example.com/script.js", duration: 500, size: 120 },
            { type: "css", url: "https://example.com/style.css", duration: 300, size: 80 },
            { type: "img", url: "https://example.com/image.jpg", duration: 600, size: 200 }
        ],
        longTasks: [
            { startTime: 1000, duration: 200 },
            { startTime: 2000, duration: 150 }
        ]
    },
    {
        url: "https://example.com/page2",
        pv: 800,
        fcp: 2000,
        lcp: 3000,
        fid: 100,
        ttfb: 1000,
        score: 70,
        resources: [
            { type: "js", url: "https://example.com/script2.js", duration: 400, size: 100 },
            { type: "css", url: "https://example.com/style2.css", duration: 350, size: 70 },
            { type: "img", url: "https://example.com/image2.jpg", duration: 700, size: 180 }
        ],
        longTasks: [
            { startTime: 1200, duration: 180 },
            { startTime: 2200, duration: 120 }
        ]
    }
]

const formatMs = (ms: number) => `${ms}ms`

const PerformanceTable: React.FC = () => {
    const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([])

    const columns: ColumnsType<PagePerformance> = [
        {
            title: "URL",
            dataIndex: "url",
            key: "url",
            sorter: (a, b) => a.url.localeCompare(b.url)
        },
        {
            title: "PV",
            dataIndex: "pv",
            key: "pv",
            sorter: (a, b) => a.pv - b.pv
        },
        {
            title: "FCP",
            dataIndex: "fcp",
            key: "fcp",
            render: text => formatMs(text),
            sorter: (a, b) => a.fcp - b.fcp
        },
        {
            title: "LCP",
            dataIndex: "lcp",
            key: "lcp",
            render: text => formatMs(text),
            sorter: (a, b) => a.lcp - b.lcp
        },
        {
            title: "FID",
            dataIndex: "fid",
            key: "fid",
            render: text => formatMs(text),
            sorter: (a, b) => a.fid - b.fid
        },
        {
            title: "TTFB",
            dataIndex: "ttfb",
            key: "ttfb",
            render: text => formatMs(text),
            sorter: (a, b) => a.ttfb - b.ttfb
        },
        {
            title: "综合评分",
            dataIndex: "score",
            key: "score",
            sorter: (a, b) => a.score - b.score
        }
    ]

    const expandedRowRender = (record: PagePerformance) => (
        <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="资源加载" key="1">
                <Table
                    columns={[
                        { title: "类型", dataIndex: "type", key: "type" },
                        { title: "URL", dataIndex: "url", key: "url" },
                        { title: "耗时", dataIndex: "duration", key: "duration", render: formatMs },
                        { title: "大小", dataIndex: "size", key: "size", render: text => `${text}KB` }
                    ]}
                    dataSource={record.resources}
                    pagination={false}
                />
            </Tabs.TabPane>
            <Tabs.TabPane tab="长任务" key="2">
                <Table
                    columns={[
                        { title: "开始时间", dataIndex: "startTime", key: "startTime", render: formatMs },
                        { title: "耗时", dataIndex: "duration", key: "duration", render: formatMs }
                    ]}
                    dataSource={record.longTasks}
                    pagination={false}
                />
            </Tabs.TabPane>
            <Tabs.TabPane tab="用户时间线" key="3">
                <div>Waterfall Chart</div>
            </Tabs.TabPane>
        </Tabs>
    )

    const expandable = {
        expandedRowRender,
        rowExpandable: (record: any) => record.resources.length > 0,
        expandedRowKeys,
        onExpandedRowsChange: (keys: any) => setExpandedRowKeys(keys)
    }

    return (
        <Card>
            <Table rowKey="url" columns={columns} expandable={expandable} dataSource={data} pagination={{ pageSize: 10 }} />
        </Card>
    )
}

export default PerformanceTable
